<nz-layout style="height: calc(100vh - 160px)">
    <nz-sider nzTheme="light">
        <ul nz-menu style="border-width: 0">
            <li nz-menu-item><button nz-button nzType="primary" (click)="addFrozenConfigButtonOnClick()">新建冻结配置</button></li>
            <li nz-menu-item *ngFor="let frozenConfig of frozenConfigList"
                (click)="selectCurrentFrozenConfig(frozenConfig)">{{frozenConfig.eurekaCode}}</li>
        </ul>
    </nz-sider>
    <nz-content [className]="'ant-layout-content' + (!!currentFrozenConfig ? '' : ' center')">
        <nz-empty *ngIf="!currentFrozenConfig" nzNotFoundContent="Please Choose One Frozen Config"></nz-empty>
        <div id="frozenDetailContainer" *ngIf="!!currentFrozenConfig">、
            <div nz-row>
                <div nz-col nzSpan="22">
                    <h1>{{currentFrozenConfig.eurekaCode}}</h1>
                </div>
                <div nz-col nzSpan="2">
                    <button nz-button nzType="default" nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除?"
                            (nzOnConfirm)="removeCurrentFrozenConfig()">
                        删除配置
                    </button>
                </div>
            </div>
            <div *ngFor="let rowData of generateAppDisplayGroup(currentFrozenConfig)" class="data-row" nz-row
                 nzGutter="8">
                <div *ngFor="let eurekaApplication of rowData" nz-col nzSpan="8">
                    <nz-card nzTitle="{{eurekaApplication.name}}">
                        <div class="data-card-body">
                            <div nz-row class="eureka-instance-line"
                                 *ngFor="let eurekaInstance of eurekaApplication.instance">
                                <span nz-col nzSpan="18"
                                      style="word-break: break-all;">{{eurekaInstance.instanceId}}</span>
<!--                                <span nz-col nzSpan="3">-->
<!--                                    <a nz-dropdown [nzDropdownMenu]="menu">-->
<!--                                        操作-->
<!--                                        <em nz-icon nzType="down" nzTheme="outline"></em>-->
<!--                                    </a>-->
<!--                                </span>-->

<!--                                <nz-dropdown-menu #menu="nzDropdownMenu">-->
<!--                                    <ul nz-menu nzSelectable>-->
<!--                                        <li nz-menu-item>-->
<!--                                            <button nz-button nzType="default" nzSize="small">-->
<!--                                                编辑-->
<!--                                            </button>-->
<!--                                        </li>-->
<!--                                        <li nz-menu-item>-->
<!--                                            <a target="_blank"-->
<!--                                               style="text-align: center; color: skyblue;text-decoration:underline"-->
<!--                                               href="{{(!!eurekaInstance.statusPageUrl && eurekaInstance.statusPageUrl.length > 5) ? eurekaInstance.statusPageUrl.substr(0, eurekaInstance.statusPageUrl.length - 5) : '#'}}">-->
<!--                                                act-->
<!--                                            </a>-->
<!--                                        </li>-->
<!--                                        <li nz-menu-item>-->
<!--                                            <button nz-button nzSize="small" nzType="primary" nzGhost-->
<!--                                                    [disabled]="eurekaInstance.status === 'UP'" nz-popconfirm-->
<!--                                                    nzPopconfirmTitle="确认?">-->
<!--&lt;!&ndash;                                                    (nzOnConfirm)="putStatusUp(eurekaInstance.app, eurekaInstance.instanceId)"&ndash;&gt;-->
<!--                                                删除-->
<!--                                            </button>-->
<!--                                        </li>-->
<!--                                    </ul>-->
<!--                                </nz-dropdown-menu>-->
                            </div>
                        </div>
                    </nz-card>
                </div>
            </div>
        </div>
    </nz-content>
</nz-layout>

<nz-modal id="createFrozenConfigModal"
          [(nzVisible)]="createFrozenConfigModalIsVisible"
          nzTitle="创建配置"
          (nzOnCancel)="handleCreateFrozenConfigModalCancel()"
          (nzOnOk)="handleCreateFrozenConfigModalOk()">
    <ng-container *nzModalContent>
        <form nz-form [formGroup]="createFrozenConfigForm">
            <div nz-row nzGutter="8">
                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label>Eureka Code</nz-form-label>
                        <nz-form-control>
                            <input nz-input id="eurekaCode" name="eurekaCode" formControlName="eurekaCode" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </ng-container>
</nz-modal>
